<template>
  <div class="item-content">
    <div class="form-content">
      <el-form :model="form" ref="ruleForm" label-width="9em">
        <el-row :gutter="0">
          <el-col :span="6">
            <el-form-item label="姓名：" prop="name">
              <el-input placeholder="请输入姓名" v-model="form.name">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="工号：" prop="jobNumber">
              <el-input placeholder="请输入工号" v-model="form.jobNumber">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="岗位：" prop="post">
              <el-input placeholder="请输入岗位" v-model="form.post">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="身份证号：" prop="idNumber">
              <el-input placeholder="请输入身份证号" v-model="form.idNumber">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系电话：" prop="telephone">
              <el-input placeholder="请输入联系电话" v-model="form.telephone">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="学历 ：" prop="education">
              <!-- <el-input placeholder="学历 " v-model="form.phone"> </el-input> -->
              <el-select
                v-model="form.education"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option label="小学" :value="1"> </el-option>
                <el-option label="初中" :value="2"> </el-option>
                <el-option label="高中" :value="3"> </el-option>
                <el-option label="大专" :value="4"> </el-option>
                <el-option label="大学" :value="5"> </el-option>
                <el-option label="研究生" :value="6"> </el-option>
                <el-option label="其他" :value="7"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="职称：" prop="jobTitle">
              <el-input placeholder="请输入职称" v-model="form.jobTitle">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="社保情况：" prop="socialSecurity">
              <el-select
                v-model="form.socialSecurity"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option label="已交" :value="1"> </el-option>
                <el-option label="未交" :value="0"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="商业保险：" prop="businessInsurance">
              <el-select
                v-model="form.businessInsurance"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option label="已交" :value="1"> </el-option>
                <el-option label="未交" :value="0"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="培训情况链接：" prop="trainingLink">
              <el-input
                placeholder="请输入培训情况链接"
                v-model="form.trainingLink"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col></el-col>
          <el-col :span="6">
            <el-form-item label="资格证书名称：" prop="certificateName">
              <el-upload
                v-model="form.certificateName"
                :file-list="fileList1"
                :on-success="certificateNameSuccess"
                :on-remove="certificateNameRemove"
                class="upload-demo"
                action="/api/upload"
                multiple
                :limit="limit"
                :on-error="fileError"
              >
                <!-- :limit="1" -->
                <el-button type="primary">上传证书</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="劳动合同：" prop="laborContract">
              <el-upload
                v-model="form.laborContract"
                :file-list="fileList2"
                :on-success="laborContractSuccess"
                :on-remove="laborContractRemove"
                class="upload-demo"
                action="/api/upload"
                multiple
                :limit="limit"
                :on-error="fileError"
              >
                <el-button type="primary">上传合同</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="体检报告：" prop="medicalReport">
              <el-upload
                v-model="form.medicalReport"
                :file-list="fileList3"
                :on-success="medicalReportSuccess"
                :on-remove="medicalReportRemove"
                class="upload-demo"
                action="/api/upload"
                multiple
                :limit="limit"
                :on-error="fileError"
              >
                <el-button type="primary">上传报告</el-button>
              </el-upload>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item
              label="安全责任书："
              prop="safetyResponsibilityLetter"
            >
              <el-upload
                v-model="form.safetyResponsibilityLetter"
                :file-list="fileList4"
                :on-success="safetyResponsibilityLetterSuccess"
                :on-remove="safetyResponsibilityLetterRemove"
                class="upload-demo"
                action="/api/upload"
                :on-error="fileError"
                :limit="limit"
              >
                <el-button type="primary">上传责任书</el-button>
                <template #tip>
                  <div class="el-upload__tip"></div>
                </template>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="dialog-action-bar">
      <el-button type="success" size="large" @click="submit()">保存</el-button>
    </div>
  </div>
</template>
<script>
import { addInformation } from "@/api/employee.js";
export default {
  name: "EditPersonnel",

  data() {
    return {
      fileList1: [],
      fileList2: [],
      fileList3: [],
      fileList4: [],
      limit: 1,
      value: 1,
      form: {
        name: null, // 姓名：
        jobNumber: null, //  工号：
        post: null, //岗位：
        idNumber: null, // 身份证号：
        telephone: null, // 联系电话：
        education: null, // 学历
        jobTitle: null, // 职称：
        socialSecurity: null, // 社保情况：
        businessInsurance: null, // 商业保险：
        trainingLink: null, // 培训情况链接：
        certificateName: null, // 资格证书名称：
        laborContract: null, //劳动合同：
        medicalReport: null, //体检报告：
        safetyResponsibilityLetter: null, // 安全责任书：
      },
    };
  },
  methods: {
    //提交
    async submit() {
      this.fileList1.length == 0 ? (this.form.certificateName = null) : "";
      this.fileList2.length == 0 ? (this.form.laborContract = null) : "";
      this.fileList3.length == 0 ? (this.form.medicalReport = null) : "";
      this.fileList4.length == 0
        ? (this.form.safetyResponsibilityLetter = null)
        : "";
      let result = await addInformation(this.form);
      if (result.code == 0) {
        this.$notify({
          title: "成功",
          message: "保存成功",
          type: "success",
        });
        this.clearForm();
      } else {
        this.$notify({
          title: "失败",
          message: "上传失败",
          type: "warning",
        });
      }
    },
    clearForm() {
      this.form = {
        name: null, // 姓名：
        jobNumber: null, //  工号：
        post: null, //岗位：
        idNumber: null, // 身份证号：
        telephone: null, // 联系电话：
        education: null, // 学历
        jobTitle: null, // 职称：
        socialSecurity: null, // 社保情况：
        businessInsurance: null, // 商业保险：
        trainingLink: null, // 培训情况链接：
        certificateName: null, // 资格证书名称：
        laborContract: null, //劳动合同：
        medicalReport: null, //体检报告：
        safetyResponsibilityLetter: null, // 安全责任书：
      };
      this.fileList1 = [];
      this.fileList2 = [];
      this.fileList3 = [];
      this.fileList4 = [];
    },
    //文件上传失败
    fileError() {
      this.$notify({
        title: "失败",
        message: "上传失败",
        type: "warning",
      });
    },
    // 安全责任书移除
    safetyResponsibilityLetterRemove(file) {
      console.log(file.url);
      this.fileList4.map((item, index) => {
        if (item.url == file.url) {
          this.fileList4.splice(index, 1);
        }
      });
    },
    //安全责任书文件上传
    safetyResponsibilityLetterSuccess(res) {
      if (res.code == 0) {
        this.$notify({
          title: "成功",
          message: "上传成功",
          type: "success",
        });
        this.fileList4.push({
          name: res.data[1],
          url: "api/" + res.data[0],
        });
        this.form.safetyResponsibilityLetter = "api/" + res.data[0];
      } else {
        this.$notify({
          title: "失败",
          message: "上传失败",
          type: "warning",
        });
      }
    },
    //劳动合同移除
    medicalReportRemove(file) {
      console.log(file.url);
      this.fileList3.map((item, index) => {
        if (item.url == file.url) {
          this.fileList3.splice(index, 1);
        }
      });
    },
    //劳动合同文件上传
    medicalReportSuccess(res) {
      if (res.code == 0) {
        this.$notify({
          title: "成功",
          message: "上传成功",
          type: "success",
        });
        this.fileList3.push({
          name: res.data[1],
          url: "api/" + res.data[0],
        });
        this.form.medicalReport = "api/" + res.data[0];
      } else {
        this.$notify({
          title: "失败",
          message: "上传失败",
          type: "warning",
        });
      }
    },
    // 劳动合同移除
    laborContractRemove(file) {
      console.log(file.url);
      this.fileList2.map((item, index) => {
        if (item.url == file.url) {
          this.fileList2.splice(index, 1);
        }
      });
    },
    //劳动合同文件上传
    laborContractSuccess(res) {
      if (res.code == 0) {
        this.$notify({
          title: "成功",
          message: "上传成功",
          type: "success",
        });
        this.fileList2.push({
          name: res.data[1],
          url: "api/" + res.data[0],
        });
        this.form.laborContract = "api/" + res.data[0];
      } else {
        this.$notify({
          title: "失败",
          message: "上传失败",
          type: "warning",
        });
      }
    },
    // 资格证书移除
    certificateNameRemove(file) {
      console.log(file.url);
      this.fileList1?.map((item, index) => {
        if (item.url == file.url) {
          this.fileList1.splice(index, 1);
        }
      });
    },
    //资格证书文件上传
    certificateNameSuccess(res) {
      if (res.code == 0) {
        this.$notify({
          title: "成功",
          message: "上传成功",
          type: "success",
        });
        this.fileList1.push({
          name: res.data[1],
          url: "api/" + res.data[0],
        });
        this.form.certificateName = "api/" + res.data[0];
      } else {
        this.fileList1 = [];
        this.form.certificateName = "";
        this.$notify({
          title: "失败",
          message: "上传失败",
          type: "warning",
        });
      }
    },
  },
  created() {
    console.log("Component created.");
  },
};
</script>

<style lang="scss" scoped>
:deep(.el-input__inner) {
  height: auto !important;
}
.container {
  height: 100%;
  padding: 15px;
  overflow: auto;
  box-sizing: border-box;

  .main-content {
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    min-width: 700px;

    .header-container {
      padding: 15px 15px;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;

      .title {
        position: relative;
        font-weight: bold;
        color: #333;
        font-size: 15px;
        padding-left: 16px;

        &::before {
          content: "";
          width: 3px;
          height: 16px;
          background-color: #82a848;
          left: 5px;
          top: calc(50% - 8px);
          position: absolute;
        }

        &::after {
          content: "";
          width: 3px;
          height: 16px;
          background-color: #82a848;
          left: 5px;
          top: calc(50% - 8px);
          position: absolute;
        }
      }
    }
  }
}

.main {
  padding: 6px 15px;

  .item-content {
    margin-bottom: 20px;
    min-height: 30em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .item-header {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;

      .subheading {
        position: relative;
        color: #555;
        font-size: 14px;
        padding-left: 14px;

        &::after {
          content: "";
          width: 2px;
          height: 14px;
          background-color: #82a848;
          left: 0;
          top: calc(50% - 7px);
          position: absolute;
        }

        &::before {
          content: "";
          width: 2px;
          height: 14px;
          background-color: #82a848;
          left: 4px;
          top: calc(50% - 7px);
          position: absolute;
        }
      }
    }

    .content-container {
      margin-top: -1px;
    }
  }
}

.w-100 {
  width: 100%;
}

.item-form-content {
  display: flex;
  flex-direction: row;
  align-items: center;

  i {
    margin: 0 10px;
  }
}

.productList-content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  height: 40px;
}

.form-content {
  padding: 0 10px;
}

.dialog-action-bar {
  text-align: center;
  margin-top: 30px;
}
</style>
